<template>
    <div class="Spherical-diagram">
        <div class="liquid-chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';

export default {
    name: 'SphericalDiagram',
    data() {
        return {
            option: null,
            chart: null
        };
    },
    props: {
        data: {
            type: String,
            default: "0"
        },
        scale: {
            type: Number,
            default: 1
        }
    },
    mounted() {
        this.chart = echarts.init(this.$el, null, {
            devicePixelRatio: window.devicePixelRatio * this.scale || 1 // 添加 DPR 配置
        });
        const dataArr = [0.5, 0.5, 0.5];
        // const dataArr = [1, 1, 1];


        // 创建渐变对象（新增代码）
        const createGradient1 = () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(37, 138, 232, 1)' },
                { offset: 0.5, color: 'rgba(37, 138, 232, 0.3)' },
                { offset: 1, color: 'rgba(37, 138, 232, 0)' },
            ]);
        };
        const createGradient2 = () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(37, 138, 232, 0.5)' },
                { offset: 0.5, color: 'rgba(37, 138, 232, 0.3)' },
                { offset: 0.9, color: 'rgba(37, 138, 232, 0)' },
            ]);
        };
        const createGradient3 = () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(37, 138, 232, 0.2)' },
                { offset: 0.5, color: 'rgba(37, 138, 232, 0.1)' },
                { offset: 1, color: 'rgba(37, 138, 232, 0)' },
            ]);
        };


        this.option = {

            title: {
                show: true,
                text: `${this.data}\n\n 米`,
                textStyle: {
                    fontSize: 12,
                    fontFamily: 'Microsoft Yahei',
                    fontWeight: 'bold',
                    color: '#fff',
                    align: 'center'  // 水平居中
                },
                x: '44%',
                y: '50%',
                textAlign: 'center',  // 文本对齐方式
                textVerticalAlign: 'middle'  // 文本垂直对齐
            },
            series: [
                {
                    type: 'liquidFill',
                    radius: "84%",
                    center: ['47%', '51%'],
                    data: dataArr,
                    color: [createGradient1(), createGradient2(), createGradient3()],
                    backgroundStyle: {
                        color: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 4,   // 增大模糊半径
                        shadowColor: 'rgba(29, 104, 176, 1)', // 使用不透明颜色
                    },
                    amplitude: 8,  // 可调整波浪幅度增强阴影效果
                    outline: {
                        show: true,
                        borderDistance: 0,  // 增加间距
                        itemStyle: {
                            borderColor: 'rgba(29, 104, 176, 1)',
                            borderWidth: 0,  // 加粗边框
                            shadowBlur: 30,   // 增大模糊半径
                            shadowColor: 'rgba(29, 104, 176, 1)', // 使用不透明颜色
                        }
                    },
                    label: {
                        formatter: ''
                    }
                }
            ]
        };

        // 调整水波层透明度
        this.option.series[0].backgroundStyle.color = 'transparent';
        this.option.series[0].itemStyle = {
            opacity: 0.85 // 水波半透明显示背景
        };

        this.chart.setOption(this.option);
    },
    watch: {
        scale(newVal) { // 新增 scale 监听
            this.$nextTick(() => {
                this.chart.dispose();
                this.chart = echarts.init(this.$el, null, {
                    devicePixelRatio: window.devicePixelRatio * newVal || 1
                });
                this.chart.setOption(this.option);
            });
        },
        data(newVal) {
            this.$nextTick(() => {
                if (newVal !== undefined && newVal !== null) {
                    // this.option.series[0].data = newVal;
                    // 更新之前先清空图表 不然会有数字重叠的问题
                    this.option.title.text = `${newVal}\n\n 米`; // 更新标题


                    // this.option.title.text = `${newVal}\n米`;  // 调整文本格式
                    this.option.title.textStyle.rich = {  // 可选：使用富文本样式
                        value: {
                            fontSize: newVal.length > 2 ? 10 : 12,  // 数值较长时缩小字体
                            fontWeight: 'bold',
                            color: '#fff'
                        },
                        unit: {
                            fontSize: 10,
                            color: '#fff'
                        }
                    };
                    this.option.title.formatter = () => {
                        return `{value|${newVal}}\n{unit|米}`;  // 使用富文本格式化
                    };



                    this.chart.clear();
                    this.chart.setOption(this.option, true);
                    // this.handleItemMouseover(0);
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.Spherical-diagram {
    width: 100px;
    height: 95px;
    margin: 0 auto;
    background-image: url("@/assets/images/home-page/right/you5.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

.liquid-chart {
    width: 90px;
    height: 90px;
    border-radius: 200px;
}
</style>
